<template>
    <div class="login-container">
        <el-form
        class="login-form"
        :model="loginForm"
        :rules="loginRules"
        ref="loginFormRef">
            <h2 class="title">聊天系统</h2>
            <el-form-item prop="userName">
                <el-input 
                    placeholder="请输入账号"
                    prefix-icon="User"
                    v-model="loginForm.userName">
                </el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input 
                    placeholder="请输入密码"
                    type="password"
                    prefix-icon="Lock"
                    v-model="loginForm.password">
                </el-input>
            </el-form-item>
            <el-button class="login-btn" type="primary" @click="doLogin">登录</el-button>
            <div class="register-tip">
                没有账号？
                <el-link type="primary" @click="showRegisterDialog = true">立即注册</el-link>
            </div>
        </el-form>


    <el-dialog v-model="showRegisterDialog" title="注册新账号" width="400px">
    <el-form label-width="80px"
        ref="registerFormRef"
        :model="registerForm"
        :rules="registerRules">
        <el-form-item label="账号" prop="userName">
                <el-input 
                    placeholder="请输入账号"
                    v-model="registerForm.userName">
                </el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input 
                    placeholder="请输入密码"
                    type="password"
                    v-model="registerForm.password">
                </el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="repassword">
                <el-input 
                    placeholder="再次输入密码"
                    type="password"
                    v-model="registerForm.repassword">
                </el-input>
            </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showRegisterDialog = false">取消</el-button>
        <el-button type="primary" @click="doRegister">注册</el-button>
      </div>
    </template>
  </el-dialog>

    </div>
</template>

<script setup lang="ts">
    import { reactive,ref } from 'vue';
    import { ElMessage } from 'element-plus';
    import axios from '../api/axios'
    import { useRouter } from 'vue-router';


    const router = useRouter()

    //控制注册对话框是否显示，默认不显示
    const showRegisterDialog = ref(false)
    const loginForm = reactive({
        userName:'',
        password:''
    })
    const registerForm = reactive({
        userName:'',
        password:'',
        repassword:''
    })


    const loginRules = reactive({
        userName:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 18, message: '用户名长度在3-18之间', trigger: 'blur' }
        ],
        password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 4, message: '密码长度至少4位', trigger: 'blur' }
        ]
    })

    const loginFormRef = ref(null) //表单实例对象


    //登录
    const doLogin = ()=>{
        loginFormRef.value.validate((valid)=>{
            if(valid){  //校验通过
               axios.post('/login',loginForm).then(res=>{
                if(res.data.success){
                    ElMessage.success('登录成功')
                    localStorage.setItem('user',JSON.stringify(res.data.user))

                    router.push('/chat')
                
                }else{
                    ElMessage.error(res.data.message)
                }
            })

            }else{
                ElMessage.error('请按要求填写信息')
            }
        })
    }

    const registerFormRef = ref(null)

    const registerRules = reactive({
        userName:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 18, message: '用户名长度在3-18之间', trigger: 'blur' }
        ],
        password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 4, message: '密码长度至少4位', trigger: 'blur' }
        ],
        repassword:[
            {
                validator:(rule,value,callback)=>{   //自定义验证函数
                    if(value != registerForm.password){
                        callback(new Error('两次输入的密码不一致'))  //调用回调函数返回错误
                    }else{
                        callback() //验证通过
                    }
                 },trigger:'blur'
            }
        ]

    })

    //注册
    const doRegister = ()=>{
        registerFormRef.value.validate((valid)=>{
            if(valid){ //校验全部通过
               axios.post('/register',registerForm)
               .then(res=>{
                   if(res.data.success){
                       ElMessage.success('注册成功')
                       showRegisterDialog.value = false
                   }else{
                       ElMessage.error(res.data.message)
                   }
               })
            }else{
                ElMessage.error('请按要求填写信息')
            }
        })
    }


</script>


<style lang="scss" scoped>
    @use '../assets/login.scss'
</style>